/*
 * @Author: liu.lin liu.lin@hzleaper.com
 * @Date: 2023-11-15 17:02:04
 * @LastEditors: liu.lin liu.lin@hzleaper.com
 * @LastEditTime: 2023-11-20 17:24:58
 * @FilePath: \aoi_link_frontend\src\page\line-yield-analyse\component\Table\index.tsx
 * @Description: 这是table组件
 */
import { FC } from 'react';
import { Table } from 'antd';
import { columns } from './table.header';
import { TableType } from './index.type';
import './index.less';
const sites: string[] = ['一厂', '二厂'];
const lines: string[] = ['一线', '二线'];
const stations: string[] = ['POL', '偏贴后', '产线'];

const data: TableType[] = [];
for (let i = 0; i < 10; i++) {
  data.push({
    key: i,
    site: sites[Math.floor(Math.random() * sites.length)],
    line: lines[Math.floor(Math.random() * lines.length)],
    station: stations[Math.floor(Math.random() * stations.length)],
    outPut: Math.floor(Math.random() * 1000 + 1),
    yeild: '78%'
  });
  // console.log(`data`, data);
}

const LineYieldAnalyseTable: FC = () => {
  // 自定义厂区列的render函数
  const renderSiteCell = (value: string, row: TableType, index: number) => {
    const obj = {
      children: value,
      props: {} as any
    };
    // 判断是否需要合并单元格
    if (index > 0 && value === data[index - 1].site) {
      obj.props.rowSpan = 0;
    } else {
      const count = data.filter(item => item.site === value).length;
      obj.props.rowSpan = count;
    }
    return obj;
  };

  // 自定义产线列的render函数
  const renderLineCell = (value: string, row: TableType, index: number) => {
    const obj = {
      children: value,
      props: {} as any
    };
    // 判断是否需要合并单元格
    if (index > 0 && value === data[index - 1].line) {
      obj.props.rowSpan = 0;
    } else {
      const count = data.filter(item => item.line === value).length;
      obj.props.rowSpan = count;
    }
    return obj;
  };

  // 修改厂区列和产线列的render属性
  const modifiedColumns = columns.map(column => {
    if (column.key === 'site') {
      return {
        ...column,
        render: renderSiteCell
      };
    }
    if (column.key === 'line') {
      return {
        ...column,
        render: renderLineCell
      };
    }
    return column;
  });

  return (
    <div className="line_table">
      <Table columns={columns} bordered dataSource={data} scroll={{ x: 'calc(700px + 50%)', y: 200 }} pagination={false} />
    </div>
  );
};

export default LineYieldAnalyseTable;
